<template>
	<view class="fl-s-s p-r-30 relative">
		<text class="c-33 fs-28" style="margin-top: 40rpx;">请输入新手机号</text>
		<view class="ibox fr-s-c"  style="margin-top: 20rpx;">
			<text class="c-33 fs-28 w-132 bold">+86</text>
			<input type="number" maxlength="11" v-model="mobile" class="flex-1 fs-28" placeholder="请输入手机号" />
		</view>
		<view class="ibox fr-s-c" style="margin-top: 30rpx;">
			<text class="c-33 fs-28 w-132 bold">验证码</text>
			<input type="number" maxlength="6" v-model="code" class="flex-1 fs-28" placeholder="请输入短信验证码" />
			<text class="c-main codebtn fr-c fs-26" @click="getCode">{{tips}}</text>
		</view>
		
		<view class="big-btn c-ff fr-c fs-30" style="margin-top: 60rpx;" @click="sub">确认</view>
		<up-code :seconds="seconds" ref="uCodeRef" @change="codeChange"></up-code>
	</view>
</template>

<script setup>
	const pwd = ref(true);
	const tips = ref('');
	const seconds = ref(120);
	const uCodeRef = ref(null);
	
	
	const mobile = ref('');
	const code = ref('');
	const password = ref('');
	const repwd = ref('')
	
	
	const codeChange = (text) => {
		console.log(text)
		tips.value = text;
	};

	const getCode = () => {
		if (uCodeRef.value.canGetCode) {
			// 模拟向后端请求验证码
			uni.showLoading({
				title: '正在获取验证码',
			});
			uni.$post({
				url:"/api/Sms/send",
				data:{
					mobile:mobile.value,
					event:'changemobile',			// 注册传register 登录传login 忘记密码传pass 修改密码传 resetpwd 更换手机号传changemobile 微信登录绑定手机号传webind 验证是否是本机main 商家入驻 dplot 绑定银行卡 addpay
				}
			}).then(res=>{
				uni.hideLoading();
				// 这里此提示会被start()方法中的提示覆盖
				uni.$u.toast('验证码已发送');
				// 通知验证码组件内部开始倒计时
				uCodeRef.value.start();
			})
		} else {
			uni.$u.toast('倒计时结束后再发送');
		}
	};
	
	function sub(){
		if(!mobile.value) return uni.$u.toast('请输入手机号');
		if(!code.value) return uni.$u.toast('请输入验证码');
		uni.$post({
			url:'/api/User/changemobile',
			data:{
				mobile:mobile.value,
				captcha:code.value,
			}
		}).then(res=>{
			uni.showToast({
				title: '更换成功',
			})
			uni.$delayBack()
		})
	}
</script>

<style>
	page{
		background: #f5f5f5;
	}
	.ibox {
		width: 686rpx;
		height: 88rpx;
		background: #FFFFFF;
		border-radius: 44rpx 44rpx 44rpx 44rpx;
		padding: 0 30rpx;
	}

	
	
	.w-132{
		width: 132rpx;
	}
	
	.codebtn{
		min-width: 146rpx;
		/* padding: 0 24rpx; */
		height: 44rpx;
		/* background: #f5f5f5; */
		border-radius: 22rpx 22rpx 22rpx 22rpx;
	}
</style>